<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { type FormInstance, type FormRules,ElMessage } from 'element-plus'
import axios from "axios"
import { useRouter } from 'vue-router';

const ruleFormRef = ref<FormInstance>()
const router = useRouter();
const loading = ref(false)
const dialogVisible = ref(false)

const checkUsername = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('学号不能为空'))
  }
  setTimeout(() => {
    if (!value.match((/^\d*$/))) {
      callback(new Error('学号必须由数字组成'))
    } else {
      callback();
    }
  }, 1000)
}

const checkPassword = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('密码不能为空'))
  } else {
    callback();
  }
}

const ruleForm = reactive({
  username:'',
  password:'',
  agree:[]
})

const rules = reactive<FormRules<typeof ruleForm>>({
  username: [{ validator: checkUsername, trigger: 'blur' }],
  password: [{ validator: checkPassword, trigger: 'blur' }],
  agree:[{type:'array',required:true,message:"请阅读并同意协议",trigger:"change"}]
})

function showPolicy() {
  dialogVisible.value = true
}

//登录测试成功
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      loading.value = true;
      console.log('submit!')
      axios({
        method: 'post',
        url: '/user/login',
        data: {
          username:ruleForm.username,
          password:ruleForm.password
        },
        headers: {
          'Content-Type':'application/x-www-form-urlencoded'
        }
        })
        .then(function(response) {
          console.log(response)
          if(response.data.status) {
            localStorage.setItem("Authorization",response.data.data)
            console.log(localStorage.getItem("Authorization"))
            router.push("/Message")
          } else {
            ElMessage.error("用户名或密码错误")
            loading.value = false
          }
        })

    } else {
      console.log('error submit!')
    }
  })
}
</script>

<template >
  <div class="background" v-loading="loading">
    <div class="login_container">
        <h1 style="color: white;">登录</h1>
        <el-form
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            >

            <el-form-item prop="username">
                <el-input v-model="ruleForm.username" style="width: 300px;font-size: 18px;" placeholder="学号" />
            </el-form-item>

            <el-form-item prop="password">
                <el-input v-model="ruleForm.password" style="font-size: 18px;" placeholder="密码" show-password/>
            </el-form-item>
            <span style="font-weight:900 ;color: red;">* </span>
            <span style="font-weight:900 ;color: white;">请使用统一认证登录</span>
            <el-form-item prop="agree">
              <el-checkbox-group v-model="ruleForm.agree">
                <el-checkbox value="I_agree">
                  <span style="font-weight: 900;">我已阅读并同意</span> 
                  <!--   -->
                  <span style="padding-left: 5px;font-weight: 900;color: skyblue;" @click="showPolicy">《统一隐私政策》</span>
                </el-checkbox>
                
              </el-checkbox-group>
                
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)" style="margin-left: 37%;width: 80px;font-size: 18px;"
                :disabled="ruleForm.username === '' || ruleForm.password === '' || ruleForm.agree.length === 0 ">
                登录
                </el-button>
            </el-form-item>
        </el-form>

        <el-dialog v-model="dialogVisible" title="统一隐私政策" width="380" style="line-height: 25px">
          <span>我们非常重视您的个人隐私，并会尽最大努力保护您的信息安全。本隐私政策旨在向您说明我们收集何种信息、如何使用这些信息以及如何保护您的隐私。</span> 
          <br>
          <span>1.信息收集 我们可能会收集您在使用我们的服务时提供的个人信息，包括但不限于您的姓名、联系方式、地址、电子邮件地址等。我们可能还会收集您在使用我们服务时产生的信息，如IP地址、设备信息、浏览记录等。</span>
          <br> 
          <span>2.信息使用 我们收集的信息将用于提供、维护和改进我们的服务。我们可能会将您的信息用于个性化推荐、广告投放、客户服务等用途。我们不会将您的信息用于其他目的，除非经过您的允许或法律允许。</span>
          <br> 
          <span>3.信息保护 我们会采取合理的安全措施保护您的个人信息，防止信息泄露、丢失或被滥用。我们会限制访问您的信息的人员，并对其进行监督。一旦我们确定您的信息不再需要保留，我们会立即删除或匿名化这些信息。</span>
          <br> 
          <span>4.信息分享 在不违反法律的情况下，我们不会向第三方分享您的个人信息。如果我们需要与第三方分享您的信息，我们会提前征得您的同意，并要求第三方遵守我们的隐私政策。</span>
          <br> 
          <span>5.信息安全 我们将定期审查和更新我们的隐私政策，以确保它符合最新的法律法规和最佳实践。如果您有任何关于我们隐私政策的疑问或建议，请随时联系我们。</span>
          <br> 
          <span>通过同意本隐私政策，您将授权我们收集、使用、分享和保护您的个人信息。如果您不同意本隐私政策，您可以选择停止使用我们的服务。</span>
        </el-dialog>
    </div>
  </div>


</template>

<style scoped>
.login_container{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
}
.background{
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("../assets/poster.png") no-repeat;
  overflow: hidden;
  background-size: cover;
  background-position:bottom center;
}
</style>
